<template>
  <div class="ucd-warning-info" v-if="isWarn != 0">
    <div class="ucd-warning-icon"></div>
    <p class="ucd-warning-text" v-if="isWarn == 100">{{ $t("w1") }}</p>
    <p class="ucd-warning-text" v-if="isWarn == 200">{{ $t("w2") }}</p>
    <p class="ucd-warning-text" v-if="isWarn == 201">{{ $t("w3") }}</p>
    <!-- <p class="ucd-warning-text" v-if="isWarn==2">温控器故障，恢复后可正常使用</p>
    <p class="ucd-warning-text" v-if="isWarn==3">设备运行异常</p> -->
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "warningInfo",
  components: {},
  props: {},
  data() {
    return {
      // isWarn:3
    };
  },
  computed: {
    ...mapState({
      isWarn: (state) => state.faultDetection.code,
    }),
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
@media only screen and(min-width: 800px) {
  .ucd-warning-info {
    margin: 0 2.4rem !important;
  }
}
@media only screen and (min-width: 600px) and(max-width: 800px) {
  .ucd-warning-info {
    margin: 0 1.2rem !important;
  }
}
.ucd-warning-info {
  // background: #2B0E0B;
  background: var(--color_tip_error);
  margin: 0 1.2rem;
  padding: 1.2rem 0;
  line-height: 4.8rem;
  color: var(--emui_functional_red);
  border-radius: var(--emui_corner_radius_large);
  display: flex;
  justify-content: left;
  align-content: center;
  align-items: center;
  .ucd-warning-icon {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../assets/ic_warn.png) 100% 100%;
    background-size: cover;
    margin-left: 1.2rem;
    margin-right: 1.6rem;
  }
  p {
    width: 80%;
    line-height: 2.4rem;
    font-size: 1.6rem;
  }
}
// .ucd-warning-info {
//     position: fixed;
//     left: 0.3333rem;
//     right: 0;
//     top: 2rem;
//     height: auto;
//     line-height: 0.5777rem;
//     width: calc(100% - 0.6666rem);
//     padding: 0.3888rem 0.4444rem;
//     z-index: 102;
//     border-radius: 0.4444rem
// }

// .mode-default .ucd-warning-info {
//     background: #fff
// }

// .mode-dark .ucd-warning-info {
//     background: #000
// }

// .ucd-warning-info:before {
//     content: '';
//     width: 100%;
//     height: 100%;
//     display: inline-block;
//     position: absolute;
//     z-index: -1;
//     border-radius: 0.4444rem;
//     top: 0;
//     left: 0
// }

// .mode-default .ucd-warning-info:before {
//     background: rgba(232, 64, 38, 0.15)
// }

// .mode-dark .ucd-warning-info:before {
//     background: rgba(217, 72, 56, 0.2)
// }

// .ucd-warning-info .ucd-warning-icon {
//     position: absolute;
//     top: 50%;
//     transform: translateY(-50%);
//     display: inline-block;
//     width: 0.6667rem;
//     height: 0.667rem;
//     background-size: 100% 100%
// }

// .mode-default .ucd-warning-info .ucd-warning-icon {
//     background-image: url(../assets/ic_warn.png)
// }

// .mode-dark .ucd-warning-info .ucd-warning-icon {
//     background-image: url(../assets/ic_warn_dark.png)
// }

// .ucd-warning-info .ucd-warning-text {
//     margin-left: 1.111rem;
//     margin-right: 0.8888rem;
//     font-size: 0.4444rem;
//     text-align: left;
//     overflow: hidden;
//     text-overflow: ellipsis;
//     display: -webkit-box;
//     -webkit-line-clamp: 2;
//     -webkit-box-orient: vertical
// }

// .mode-default .ucd-warning-info .ucd-warning-text {
//     color: #E84026
// }

// .mode-dark .ucd-warning-info .ucd-warning-text {
//     color: #D94838
// }

// .ucd-warning-info .ucd-warning-arrow {
//     position: absolute;
//     top: 50%;
//     right: 0.44444rem;
//     transform: translateY(-50%);
//     display: inline-block;
//     width: 0.3333rem;
//     height: 0.6666rem;
//     background-size: 100% 100%
// }

// .mode-default .ucd-warning-info .ucd-warning-arrow {
//     background-image: url(../images/common/arrowright2.png)
// }

// .mode-dark .ucd-warning-info .ucd-warning-arrow {
//     background-image: url(../images/common/dark_arrowright2.png)
// }
</style>

